
<!DOCTYPE html>
<html class="no-js css-menubar" lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
    <meta name="description" content="bootstrap material admin template">
    <meta name="author" content="">

    <title>Buttons | Remark Material Admin Template</title>

    <link rel="apple-touch-icon" href="../assets/images/apple-touch-icon.png">
    <link rel="shortcut icon" href="../assets/images/favicon.ico">

    <!-- Stylesheets -->
    <link rel="stylesheet" href="../../global/css/bootstrap.min.css?v2.2.0">
    <link rel="stylesheet" href="../../global/css/bootstrap-extend.min.css?v2.2.0">
    <link rel="stylesheet" href="../assets/css/site.min.css?v2.2.0">

    <!-- Skin tools (demo site only) -->
    <link rel="stylesheet" href="../../global/css/skintools.min.css?v2.2.0">
    <script src="../assets/js/sections/skintools.min.js"></script>

    <!-- Plugins -->
    <link rel="stylesheet" href="../../global/vendor/animsition/animsition.min.css?v2.2.0">
    <link rel="stylesheet" href="../../global/vendor/asscrollable/asScrollable.min.css?v2.2.0">
    <link rel="stylesheet" href="../../global/vendor/switchery/switchery.min.css?v2.2.0">
    <link rel="stylesheet" href="../../global/vendor/intro-js/introjs.min.css?v2.2.0">
    <link rel="stylesheet" href="../../global/vendor/slidepanel/slidePanel.min.css?v2.2.0">
    <link rel="stylesheet" href="../../global/vendor/flag-icon-css/flag-icon.min.css?v2.2.0">
    <link rel="stylesheet" href="../../global/vendor/waves/waves.min.css?v2.2.0">

    <!-- Plugins For This Page -->
    <link rel="stylesheet" href="../../global/vendor/ladda-bootstrap/ladda.min.css?v2.2.0">

    <!-- Page -->
    <link rel="stylesheet" href="../assets/examples/css/uikit/buttons.min.css?v2.2.0">

    <!-- Fonts -->
    <link rel="stylesheet" href="../../global/fonts/material-design/material-design.min.css?v2.2.0">
    <link rel="stylesheet" href="../../global/fonts/brand-icons/brand-icons.min.css?v2.2.0">

    <link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Roboto:400,400italic,700'>


    <!--[if lt IE 9]>
    <script src="../../global/vendor/html5shiv/html5shiv.min.js"></script>
    <![endif]-->

    <!--[if lt IE 10]>
    <script src="../../global/vendor/media-match/media.match.min.js"></script>
    <script src="../../global/vendor/respond/respond.min.js"></script>
    <![endif]-->

    <!-- Scripts -->
    <script src="../../global/vendor/modernizr/modernizr.min.js"></script>
    <script src="../../global/vendor/breakpoints/breakpoints.min.js"></script>
    <script>
        Breakpoints();
    </script>
</head>
<body>
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->

<nav class="site-navbar navbar navbar-inverse navbar-fixed-top navbar-mega" role="navigation">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle hamburger hamburger-close navbar-toggle-left hided"
                data-toggle="menubar">
            <span class="sr-only">Toggle navigation</span>
            <span class="hamburger-bar"></span>
        </button>
        <button type="button" class="navbar-toggle collapsed" data-target="#site-navbar-collapse"
                data-toggle="collapse">
            <i class="icon md-more" aria-hidden="true"></i>
        </button>
        <div class="navbar-brand navbar-brand-center site-gridmenu-toggle" data-toggle="gridmenu">
            <img class="navbar-brand-logo" src="../assets/images/logo.png" title="Remark">
            <span class="navbar-brand-text hidden-xs"> Remark</span>
        </div>
        <button type="button" class="navbar-toggle collapsed" data-target="#site-navbar-search"
                data-toggle="collapse">
            <span class="sr-only">Toggle Search</span>
            <i class="icon md-search" aria-hidden="true"></i>
        </button>
    </div>

    <div class="navbar-container container-fluid">
        <!-- Navbar Collapse -->
        <div class="collapse navbar-collapse navbar-collapse-toolbar" id="site-navbar-collapse">
            <!-- Navbar Toolbar -->
            <ul class="nav navbar-toolbar">
                <li class="hidden-float" id="toggleMenubar">
                    <a data-toggle="menubar" href="#" role="button">
                        <i class="icon hamburger hamburger-arrow-left">
                            <span class="sr-only">Toggle menubar</span>
                            <span class="hamburger-bar"></span>
                        </i>
                    </a>
                </li>
                <li class="hidden-xs" id="toggleFullscreen">
                    <a class="icon icon-fullscreen" data-toggle="fullscreen" href="#" role="button">
                        <span class="sr-only">Toggle fullscreen</span>
                    </a>
                </li>
                <li class="hidden-float">
                    <a class="icon md-search" data-toggle="collapse" href="#" data-target="#site-navbar-search"
                       role="button">
                        <span class="sr-only">Toggle Search</span>
                    </a>
                </li>
                <li class="dropdown dropdown-fw dropdown-mega">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false"
                       data-animation="fade" role="button">Mega <i class="icon md-chevron-down" aria-hidden="true"></i></a>
                    <ul class="dropdown-menu" role="menu">
                        <li role="presentation">
                            <div class="mega-content">
                                <div class="row">
                                    <div class="col-sm-4">
                                        <h5>UI Kit</h5>
                                        <ul class="blocks-2">
                                            <li class="mega-menu margin-0">
                                                <ul class="list-icons">
                                                    <li><i class="md-chevron-right" aria-hidden="true"></i>
                                                        <a
                                                                href="../advanced/animation.html">Animation</a>
                                                    </li>
                                                    <li><i class="md-chevron-right" aria-hidden="true"></i>
                                                        <a
                                                                href="buttons.html">Buttons</a>
                                                    </li>
                                                    <li><i class="md-chevron-right" aria-hidden="true"></i>
                                                        <a
                                                                href="colors.html">Colors</a>
                                                    </li>
                                                    <li><i class="md-chevron-right" aria-hidden="true"></i>
                                                        <a
                                                                href="dropdowns.html">Dropdowns</a>
                                                    </li>
                                                    <li><i class="md-chevron-right" aria-hidden="true"></i>
                                                        <a
                                                                href="icons.html">Icons</a>
                                                    </li>
                                                    <li><i class="md-chevron-right" aria-hidden="true"></i>
                                                        <a
                                                                href="../advanced/lightbox.html">Lightbox</a>
                                                    </li>
                                                </ul>
                                            </li>
                                            <li class="mega-menu margin-0">
                                                <ul class="list-icons">
                                                    <li><i class="md-chevron-right" aria-hidden="true"></i>
                                                        <a
                                                                href="modals.html">Modals</a>
                                                    </li>
                                                    <li><i class="md-chevron-right" aria-hidden="true"></i>
                                                        <a
                                                                href="panel-structure.html">Panels</a>
                                                    </li>
                                                    <li><i class="md-chevron-right" aria-hidden="true"></i>
                                                        <a
                                                                href="../structure/overlay.html">Overlay</a>
                                                    </li>
                                                    <li><i class="md-chevron-right" aria-hidden="true"></i>
                                                        <a
                                                                href="tooltip-popover.html ">Tooltips</a>
                                                    </li>
                                                    <li><i class="md-chevron-right" aria-hidden="true"></i>
                                                        <a
                                                                href="../advanced/scrollable.html">Scrollable</a>
                                                    </li>
                                                    <li><i class="md-chevron-right" aria-hidden="true"></i>
                                                        <a
                                                                href="typography.html">Typography</a>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="col-sm-4">
                                        <h5>Media
                                            <span class="badge badge-success">4</span>
                                        </h5>
                                        <ul class="blocks-3">
                                            <li>
                                                <a class="thumbnail margin-0" href="javascript:void(0)">
                                                    <img class="width-full" src="../../global/photos/view-1-150x100.jpg" alt="..."
                                                            />
                                                </a>
                                            </li>
                                            <li>
                                                <a class="thumbnail margin-0" href="javascript:void(0)">
                                                    <img class="width-full" src="../../global/photos/view-2-150x100.jpg" alt="..."
                                                            />
                                                </a>
                                            </li>
                                            <li>
                                                <a class="thumbnail margin-0" href="javascript:void(0)">
                                                    <img class="width-full" src="../../global/photos/view-3-150x100.jpg" alt="..."
                                                            />
                                                </a>
                                            </li>
                                            <li>
                                                <a class="thumbnail margin-0" href="javascript:void(0)">
                                                    <img class="width-full" src="../../global/photos/view-4-150x100.jpg" alt="..."
                                                            />
                                                </a>
                                            </li>
                                            <li>
                                                <a class="thumbnail margin-0" href="javascript:void(0)">
                                                    <img class="width-full" src="../../global/photos/view-5-150x100.jpg" alt="..."
                                                            />
                                                </a>
                                            </li>
                                            <li>
                                                <a class="thumbnail margin-0" href="javascript:void(0)">
                                                    <img class="width-full" src="../../global/photos/view-6-150x100.jpg" alt="..."
                                                            />
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="col-sm-4">
                                        <h5 class="margin-bottom-0">Accordion</h5>
                                        <!-- Accordion -->
                                        <div class="panel-group panel-group-simple" id="siteMegaAccordion" aria-multiselectable="true"
                                             role="tablist">
                                            <div class="panel">
                                                <div class="panel-heading" id="siteMegaAccordionHeadingOne" role="tab">
                                                    <a class="panel-title" data-toggle="collapse" href="#siteMegaCollapseOne" data-parent="#siteMegaAccordion"
                                                       aria-expanded="false" aria-controls="siteMegaCollapseOne">
                                                        Collapsible Group Item #1
                                                    </a>
                                                </div>
                                                <div class="panel-collapse collapse" id="siteMegaCollapseOne" aria-labelledby="siteMegaAccordionHeadingOne"
                                                     role="tabpanel">
                                                    <div class="panel-body">
                                                        De moveat laudatur vestra parum doloribus labitur sentire partes, eripuit praesenti
                                                        congressus ostendit alienae, voluptati ornateque
                                                        accusamus clamat reperietur convicia albucius.
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="panel">
                                                <div class="panel-heading" id="siteMegaAccordionHeadingTwo" role="tab">
                                                    <a class="panel-title collapsed" data-toggle="collapse" href="#siteMegaCollapseTwo"
                                                       data-parent="#siteMegaAccordion" aria-expanded="false"
                                                       aria-controls="siteMegaCollapseTwo">
                                                        Collapsible Group Item #2
                                                    </a>
                                                </div>
                                                <div class="panel-collapse collapse" id="siteMegaCollapseTwo" aria-labelledby="siteMegaAccordionHeadingTwo"
                                                     role="tabpanel">
                                                    <div class="panel-body">
                                                        Praestabiliorem. Pellat excruciant legantur ullum leniter vacare foris voluptate
                                                        loco ignavi, credo videretur multoque choro fatemur
                                                        mortis animus adoptionem, bello statuat expediunt
                                                        naturales.
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="panel">
                                                <div class="panel-heading" id="siteMegaAccordionHeadingThree" role="tab">
                                                    <a class="panel-title collapsed" data-toggle="collapse" href="#siteMegaCollapseThree"
                                                       data-parent="#siteMegaAccordion" aria-expanded="false"
                                                       aria-controls="siteMegaCollapseThree">
                                                        Collapsible Group Item #3
                                                    </a>
                                                </div>
                                                <div class="panel-collapse collapse" id="siteMegaCollapseThree" aria-labelledby="siteMegaAccordionHeadingThree"
                                                     role="tabpanel">
                                                    <div class="panel-body">
                                                        Horum, antiquitate perciperet d conspectum locus obruamus animumque perspici probabis
                                                        suscipere. Desiderat magnum, contenta poena desiderant
                                                        concederetur menandri damna disputandum corporum.
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- End Accordion -->
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </li>
            </ul>
            <!-- End Navbar Toolbar -->

            <!-- Navbar Toolbar Right -->
            <ul class="nav navbar-toolbar navbar-right navbar-toolbar-right">
                <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="javascript:void(0)" data-animation="scale-up"
                       aria-expanded="false" role="button">
                        <span class="flag-icon flag-icon-us"></span>
                    </a>
                    <ul class="dropdown-menu" role="menu">
                        <li role="presentation">
                            <a href="javascript:void(0)" role="menuitem">
                                <span class="flag-icon flag-icon-gb"></span> English</a>
                        </li>
                        <li role="presentation">
                            <a href="javascript:void(0)" role="menuitem">
                                <span class="flag-icon flag-icon-fr"></span> French</a>
                        </li>
                        <li role="presentation">
                            <a href="javascript:void(0)" role="menuitem">
                                <span class="flag-icon flag-icon-cn"></span> Chinese</a>
                        </li>
                        <li role="presentation">
                            <a href="javascript:void(0)" role="menuitem">
                                <span class="flag-icon flag-icon-de"></span> German</a>
                        </li>
                        <li role="presentation">
                            <a href="javascript:void(0)" role="menuitem">
                                <span class="flag-icon flag-icon-nl"></span> Dutch</a>
                        </li>
                    </ul>
                </li>
                <li class="dropdown">
                    <a class="navbar-avatar dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false"
                       data-animation="scale-up" role="button">
              <span class="avatar avatar-online">
                <img src="../../global/portraits/5.jpg" alt="...">
                <i></i>
              </span>
                    </a>
                    <ul class="dropdown-menu" role="menu">
                        <li role="presentation">
                            <a href="javascript:void(0)" role="menuitem"><i class="icon md-account" aria-hidden="true"></i> Profile</a>
                        </li>
                        <li role="presentation">
                            <a href="javascript:void(0)" role="menuitem"><i class="icon md-card" aria-hidden="true"></i> Billing</a>
                        </li>
                        <li role="presentation">
                            <a href="javascript:void(0)" role="menuitem"><i class="icon md-settings" aria-hidden="true"></i> Settings</a>
                        </li>
                        <li class="divider" role="presentation"></li>
                        <li role="presentation">
                            <a href="javascript:void(0)" role="menuitem"><i class="icon md-power" aria-hidden="true"></i> Logout</a>
                        </li>
                    </ul>
                </li>
                <li class="dropdown">
                    <a data-toggle="dropdown" href="javascript:void(0)" title="Notifications" aria-expanded="false"
                       data-animation="scale-up" role="button">
                        <i class="icon md-notifications" aria-hidden="true"></i>
                        <span class="badge badge-danger up">5</span>
                    </a>
                    <ul class="dropdown-menu dropdown-menu-right dropdown-menu-media" role="menu">
                        <li class="dropdown-menu-header" role="presentation">
                            <h5>NOTIFICATIONS</h5>
                            <span class="label label-round label-danger">New 5</span>
                        </li>

                        <li class="list-group" role="presentation">
                            <div data-role="container">
                                <div data-role="content">
                                    <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                                        <div class="media">
                                            <div class="media-left padding-right-10">
                                                <i class="icon md-receipt bg-red-600 white icon-circle" aria-hidden="true"></i>
                                            </div>
                                            <div class="media-body">
                                                <h6 class="media-heading">A new order has been placed</h6>
                                                <time class="media-meta" datetime="2015-06-12T20:50:48+08:00">5 hours ago</time>
                                            </div>
                                        </div>
                                    </a>
                                    <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                                        <div class="media">
                                            <div class="media-left padding-right-10">
                                                <i class="icon md-account bg-green-600 white icon-circle" aria-hidden="true"></i>
                                            </div>
                                            <div class="media-body">
                                                <h6 class="media-heading">Completed the task</h6>
                                                <time class="media-meta" datetime="2015-06-11T18:29:20+08:00">2 days ago</time>
                                            </div>
                                        </div>
                                    </a>
                                    <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                                        <div class="media">
                                            <div class="media-left padding-right-10">
                                                <i class="icon md-settings bg-red-600 white icon-circle" aria-hidden="true"></i>
                                            </div>
                                            <div class="media-body">
                                                <h6 class="media-heading">Settings updated</h6>
                                                <time class="media-meta" datetime="2015-06-11T14:05:00+08:00">2 days ago</time>
                                            </div>
                                        </div>
                                    </a>
                                    <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                                        <div class="media">
                                            <div class="media-left padding-right-10">
                                                <i class="icon md-calendar bg-blue-600 white icon-circle" aria-hidden="true"></i>
                                            </div>
                                            <div class="media-body">
                                                <h6 class="media-heading">Event started</h6>
                                                <time class="media-meta" datetime="2015-06-10T13:50:18+08:00">3 days ago</time>
                                            </div>
                                        </div>
                                    </a>
                                    <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                                        <div class="media">
                                            <div class="media-left padding-right-10">
                                                <i class="icon md-comment bg-orange-600 white icon-circle" aria-hidden="true"></i>
                                            </div>
                                            <div class="media-body">
                                                <h6 class="media-heading">Message received</h6>
                                                <time class="media-meta" datetime="2015-06-10T12:34:48+08:00">3 days ago</time>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </li>
                        <li class="dropdown-menu-footer" role="presentation">
                            <a class="dropdown-menu-footer-btn" href="javascript:void(0)" role="button">
                                <i class="icon md-settings" aria-hidden="true"></i>
                            </a>
                            <a href="javascript:void(0)" role="menuitem">
                                All notifications
                            </a>
                        </li>
                    </ul>
                </li>
                <li class="dropdown">
                    <a data-toggle="dropdown" href="javascript:void(0)" title="Messages" aria-expanded="false"
                       data-animation="scale-up" role="button">
                        <i class="icon md-email" aria-hidden="true"></i>
                        <span class="badge badge-info up">3</span>
                    </a>
                    <ul class="dropdown-menu dropdown-menu-right dropdown-menu-media" role="menu">
                        <li class="dropdown-menu-header" role="presentation">
                            <h5>MESSAGES</h5>
                            <span class="label label-round label-info">New 3</span>
                        </li>

                        <li class="list-group" role="presentation">
                            <div data-role="container">
                                <div data-role="content">
                                    <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                                        <div class="media">
                                            <div class="media-left padding-right-10">
                          <span class="avatar avatar-sm avatar-online">
                            <img src="../../global/portraits/2.jpg" alt="..." />
                            <i></i>
                          </span>
                                            </div>
                                            <div class="media-body">
                                                <h6 class="media-heading">Mary Adams</h6>
                                                <div class="media-meta">
                                                    <time datetime="2015-06-17T20:22:05+08:00">30 minutes ago</time>
                                                </div>
                                                <div class="media-detail">Anyways, i would like just do it</div>
                                            </div>
                                        </div>
                                    </a>
                                    <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                                        <div class="media">
                                            <div class="media-left padding-right-10">
                          <span class="avatar avatar-sm avatar-off">
                            <img src="../../global/portraits/3.jpg" alt="..." />
                            <i></i>
                          </span>
                                            </div>
                                            <div class="media-body">
                                                <h6 class="media-heading">Caleb Richards</h6>
                                                <div class="media-meta">
                                                    <time datetime="2015-06-17T12:30:30+08:00">12 hours ago</time>
                                                </div>
                                                <div class="media-detail">I checheck the document. But there seems</div>
                                            </div>
                                        </div>
                                    </a>
                                    <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                                        <div class="media">
                                            <div class="media-left padding-right-10">
                          <span class="avatar avatar-sm avatar-busy">
                            <img src="../../global/portraits/4.jpg" alt="..." />
                            <i></i>
                          </span>
                                            </div>
                                            <div class="media-body">
                                                <h6 class="media-heading">June Lane</h6>
                                                <div class="media-meta">
                                                    <time datetime="2015-06-16T18:38:40+08:00">2 days ago</time>
                                                </div>
                                                <div class="media-detail">Lorem ipsum Id consectetur et minim</div>
                                            </div>
                                        </div>
                                    </a>
                                    <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                                        <div class="media">
                                            <div class="media-left padding-right-10">
                          <span class="avatar avatar-sm avatar-away">
                            <img src="../../global/portraits/5.jpg" alt="..." />
                            <i></i>
                          </span>
                                            </div>
                                            <div class="media-body">
                                                <h6 class="media-heading">Edward Fletcher</h6>
                                                <div class="media-meta">
                                                    <time datetime="2015-06-15T20:34:48+08:00">3 days ago</time>
                                                </div>
                                                <div class="media-detail">Dolor et irure cupidatat commodo nostrud nostrud.</div>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </li>
                        <li class="dropdown-menu-footer" role="presentation">
                            <a class="dropdown-menu-footer-btn" href="javascript:void(0)" role="button">
                                <i class="icon md-settings" aria-hidden="true"></i>
                            </a>
                            <a href="javascript:void(0)" role="menuitem">
                                See all messages
                            </a>
                        </li>
                    </ul>
                </li>
                <li id="toggleChat">
                    <a data-toggle="site-sidebar" href="javascript:void(0)" title="Chat" data-url="../site-sidebar.tpl">
                        <i class="icon md-comment" aria-hidden="true"></i>
                    </a>
                </li>
            </ul>
            <!-- End Navbar Toolbar Right -->
        </div>
        <!-- End Navbar Collapse -->

        <!-- Site Navbar Seach -->
        <div class="collapse navbar-search-overlap" id="site-navbar-search">
            <form role="search">
                <div class="form-group">
                    <div class="input-search">
                        <i class="input-search-icon md-search" aria-hidden="true"></i>
                        <input type="text" class="form-control" name="site-search" placeholder="Search...">
                        <button type="button" class="input-search-close icon md-close" data-target="#site-navbar-search"
                                data-toggle="collapse" aria-label="Close"></button>
                    </div>
                </div>
            </form>
        </div>
        <!-- End Site Navbar Seach -->
    </div>
</nav>
<div class="site-menubar">
    <div class="site-menubar-body">
        <div>
            <div>
                <ul class="site-menu">
                    <li class="site-menu-category">General</li>
                    <li class="site-menu-item">
                        <a class="animsition-link" href="../index.html">
                            <i class="site-menu-icon md-view-dashboard" aria-hidden="true"></i>
                            <span class="site-menu-title">Dashboard</span>
                        </a>
                    </li>
                    <li class="site-menu-item has-sub">
                        <a href="javascript:void(0)">
                            <i class="site-menu-icon md-view-compact" aria-hidden="true"></i>
                            <span class="site-menu-title">Layouts</span>
                            <span class="site-menu-arrow"></span>
                        </a>
                        <ul class="site-menu-sub">
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../layouts/menu-collapsed.html">
                                    <span class="site-menu-title">Menu Collapsed</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../layouts/menu-expended.html">
                                    <span class="site-menu-title">Menu Expended</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../layouts/grids.html">
                                    <span class="site-menu-title">Grid Scaffolding</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../layouts/layout-grid.html">
                                    <span class="site-menu-title">Layout Grid</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../layouts/headers.html">
                                    <span class="site-menu-title">Different Headers</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../layouts/panel-transition.html">
                                    <span class="site-menu-title">Panel Transition</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../layouts/boxed.html">
                                    <span class="site-menu-title">Boxed Layout</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../layouts/two-columns.html">
                                    <span class="site-menu-title">Two Columns</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../layouts/bordered-header.html">
                                    <span class="site-menu-title">Bordered Header</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../layouts/menubar-flipped.html">
                                    <span class="site-menu-title">Menubar Flipped</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../layouts/menubar-native-scrolling.html">
                                    <span class="site-menu-title">Menubar Native Scrolling</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../layouts/page-aside-fixed.html">
                                    <span class="site-menu-title">Page Aside Fixed</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="site-menu-item has-sub">
                        <a href="javascript:void(0)">
                            <i class="site-menu-icon md-google-pages" aria-hidden="true"></i>
                            <span class="site-menu-title">Pages</span>
                            <span class="site-menu-arrow"></span>
                        </a>
                        <ul class="site-menu-sub">
                            <li class="site-menu-item has-sub">
                                <a href="javascript:void(0)">
                                    <span class="site-menu-title">Errors</span>
                                    <span class="site-menu-arrow"></span>
                                </a>
                                <ul class="site-menu-sub">
                                    <li class="site-menu-item">
                                        <a class="animsition-link" href="../pages/error-400.html">
                                            <span class="site-menu-title">400</span>
                                        </a>
                                    </li>
                                    <li class="site-menu-item">
                                        <a class="animsition-link" href="../pages/error-403.html">
                                            <span class="site-menu-title">403</span>
                                        </a>
                                    </li>
                                    <li class="site-menu-item">
                                        <a class="animsition-link" href="../pages/error-404.html">
                                            <span class="site-menu-title">404</span>
                                        </a>
                                    </li>
                                    <li class="site-menu-item">
                                        <a class="animsition-link" href="../pages/error-500.html">
                                            <span class="site-menu-title">500</span>
                                        </a>
                                    </li>
                                    <li class="site-menu-item">
                                        <a class="animsition-link" href="../pages/error-503.html">
                                            <span class="site-menu-title">503</span>
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../pages/faq.html">
                                    <span class="site-menu-title">FAQ</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../pages/gallery.html">
                                    <span class="site-menu-title">Gallery</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../pages/gallery-grid.html">
                                    <span class="site-menu-title">Gallery Grid</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../pages/search-result.html">
                                    <span class="site-menu-title">Search Result</span>
                                </a>
                            </li>
                            <li class="site-menu-item has-sub">
                                <a href="javascript:void(0)">
                                    <span class="site-menu-title">Maps</span>
                                    <span class="site-menu-arrow"></span>
                                </a>
                                <ul class="site-menu-sub">
                                    <li class="site-menu-item">
                                        <a class="animsition-link" href="../pages/map-google.html">
                                            <span class="site-menu-title">Google Maps</span>
                                        </a>
                                    </li>
                                    <li class="site-menu-item">
                                        <a class="animsition-link" href="../pages/map-vector.html">
                                            <span class="site-menu-title">Vector Maps</span>
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../pages/maintenance.html">
                                    <span class="site-menu-title">Maintenance</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../pages/forgot-password.html">
                                    <span class="site-menu-title">Forgot Password</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../pages/lockscreen.html">
                                    <span class="site-menu-title">Lockscreen</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../pages/login.html">
                                    <span class="site-menu-title">Login</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../pages/register.html">
                                    <span class="site-menu-title">Register</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../pages/login-v2.html">
                                    <span class="site-menu-title">Login V2</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../pages/register-v2.html">
                                    <span class="site-menu-title">Register V2</span>
                                    <div class="site-menu-label">
                                        <span class="label label-info label-round">new</span>
                                    </div>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../pages/login-v3.html">
                                    <span class="site-menu-title">Login V3</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../pages/register-v3.html">
                                    <span class="site-menu-title">Register V3</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../pages/user.html">
                                    <span class="site-menu-title">User List</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../pages/invoice.html">
                                    <span class="site-menu-title">Invoice</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../pages/blank.html">
                                    <span class="site-menu-title">Blank Page</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../pages/email.html">
                                    <span class="site-menu-title">Email</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../pages/code-editor.html">
                                    <span class="site-menu-title">Code Editor</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../pages/profile.html">
                                    <span class="site-menu-title">Profile</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../pages/site-map.html">
                                    <span class="site-menu-title">Sitemap</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="site-menu-category">Elements</li>
                    <li class="site-menu-item has-sub active open">
                        <a href="javascript:void(0)">
                            <i class="site-menu-icon md-palette" aria-hidden="true"></i>
                            <span class="site-menu-title">Basic UI</span>
                            <span class="site-menu-arrow"></span>
                        </a>
                        <ul class="site-menu-sub">
                            <li class="site-menu-item has-sub">
                                <a href="javascript:void(0)">
                                    <span class="site-menu-title">Panel</span>
                                    <span class="site-menu-arrow"></span>
                                </a>
                                <ul class="site-menu-sub">
                                    <li class="site-menu-item">
                                        <a class="animsition-link" href="panel-structure.html">
                                            <span class="site-menu-title">Panel Structure</span>
                                        </a>
                                    </li>
                                    <li class="site-menu-item">
                                        <a class="animsition-link" href="panel-actions.html">
                                            <span class="site-menu-title">Panel Actions</span>
                                        </a>
                                    </li>
                                    <li class="site-menu-item">
                                        <a class="animsition-link" href="panel-portlets.html">
                                            <span class="site-menu-title">Panel Portlets</span>
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <li class="site-menu-item active">
                                <a class="animsition-link" href="buttons.html">
                                    <span class="site-menu-title">Buttons</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="dropdowns.html">
                                    <span class="site-menu-title">Dropdowns</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="icons.html">
                                    <span class="site-menu-title">Icons</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="list.html">
                                    <span class="site-menu-title">List</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="tooltip-popover.html">
                                    <span class="site-menu-title">Tooltip &amp; Popover</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="modals.html">
                                    <span class="site-menu-title">Modals</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="tabs-accordions.html">
                                    <span class="site-menu-title">Tabs &amp; Accordions</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="images.html">
                                    <span class="site-menu-title">Images</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="badges-labels.html">
                                    <span class="site-menu-title">Badges &amp; Labels</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="progress-bars.html">
                                    <span class="site-menu-title">Progress Bars</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="carousel.html">
                                    <span class="site-menu-title">Carousel</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="typography.html">
                                    <span class="site-menu-title">Typography</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="colors.html">
                                    <span class="site-menu-title">Colors</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="utilities.html">
                                    <span class="site-menu-title">Utilties</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="site-menu-item has-sub">
                        <a href="javascript:void(0)">
                            <i class="site-menu-icon md-format-color-fill" aria-hidden="true"></i>
                            <span class="site-menu-title">Advanced UI</span>
                            <span class="site-menu-arrow"></span>
                        </a>
                        <ul class="site-menu-sub">
                            <li class="site-menu-item hidden-xs site-tour-trigger">
                                <a href="javascript:void(0)">
                                    <span class="site-menu-title">Tour</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../advanced/animation.html">
                                    <span class="site-menu-title">Animation</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../advanced/highlight.html">
                                    <span class="site-menu-title">Highlight</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../advanced/lightbox.html">
                                    <span class="site-menu-title">Lightbox</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../advanced/scrollable.html">
                                    <span class="site-menu-title">Scrollable</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../advanced/rating.html">
                                    <span class="site-menu-title">Rating</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../advanced/context-menu.html">
                                    <span class="site-menu-title">Context Menu</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../advanced/alertify.html">
                                    <span class="site-menu-title">Alertify</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../advanced/masonry.html">
                                    <span class="site-menu-title">Masonry</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../advanced/treeview.html">
                                    <span class="site-menu-title">Treeview</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../advanced/toastr.html">
                                    <span class="site-menu-title">Toastr</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../advanced/maps-vector.html">
                                    <span class="site-menu-title">Vector Maps</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../advanced/maps-google.html">
                                    <span class="site-menu-title">Google Maps</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../advanced/sortable-nestable.html">
                                    <span class="site-menu-title">Sortable &amp; Nestable</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../advanced/bootbox-sweetalert.html">
                                    <span class="site-menu-title">Bootbox &amp; Sweetalert</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="site-menu-item has-sub">
                        <a href="javascript:void(0)">
                            <i class="site-menu-icon md-puzzle-piece" aria-hidden="true"></i>
                            <span class="site-menu-title">Structure</span>
                            <span class="site-menu-arrow"></span>
                        </a>
                        <ul class="site-menu-sub">
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../structure/alerts.html">
                                    <span class="site-menu-title">Alerts</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../structure/ribbon.html">
                                    <span class="site-menu-title">Ribbon</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../structure/pricing-tables.html">
                                    <span class="site-menu-title">Pricing Tables</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../structure/overlay.html">
                                    <span class="site-menu-title">Overlay</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../structure/cover.html">
                                    <span class="site-menu-title">Cover</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../structure/timeline-simple.html">
                                    <span class="site-menu-title">Simple Timeline</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../structure/timeline.html">
                                    <span class="site-menu-title">Timeline</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../structure/step.html">
                                    <span class="site-menu-title">Step</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../structure/comments.html">
                                    <span class="site-menu-title">Comments</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../structure/media.html">
                                    <span class="site-menu-title">Media</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../structure/chat.html">
                                    <span class="site-menu-title">Chat</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../structure/testimonials.html">
                                    <span class="site-menu-title">Testimonials</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../structure/nav.html">
                                    <span class="site-menu-title">Nav</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../structure/navbars.html">
                                    <span class="site-menu-title">Navbars</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../structure/blockquotes.html">
                                    <span class="site-menu-title">Blockquotes</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../structure/pagination.html">
                                    <span class="site-menu-title">Pagination</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../structure/breadcrumbs.html">
                                    <span class="site-menu-title">Breadcrumbs</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="site-menu-item has-sub">
                        <a href="javascript:void(0)">
                            <i class="site-menu-icon md-widgets" aria-hidden="true"></i>
                            <span class="site-menu-title">Widgets</span>
                            <span class="site-menu-arrow"></span>
                        </a>
                        <ul class="site-menu-sub">
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../widgets/statistics.html">
                                    <span class="site-menu-title">Statistics Widgets</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../widgets/data.html">
                                    <span class="site-menu-title">Data Widgets</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../widgets/blog.html">
                                    <span class="site-menu-title">Blog Widgets</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../widgets/chart.html">
                                    <span class="site-menu-title">Chart Widgets</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../widgets/social.html">
                                    <span class="site-menu-title">Social Widgets</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../widgets/weather.html">
                                    <span class="site-menu-title">Weather Widgets</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="site-menu-item has-sub">
                        <a href="javascript:void(0)">
                            <i class="site-menu-icon md-comment-alt-text" aria-hidden="true"></i>
                            <span class="site-menu-title">Forms</span>
                            <span class="site-menu-arrow"></span>
                        </a>
                        <ul class="site-menu-sub">
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../forms/general.html">
                                    <span class="site-menu-title">General Elements</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../forms/material.html">
                                    <span class="site-menu-title">Material Elements</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../forms/advanced.html">
                                    <span class="site-menu-title">Advanced Elements</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../forms/layouts.html">
                                    <span class="site-menu-title">Form Layouts</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../forms/wizard.html">
                                    <span class="site-menu-title">Form Wizard</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../forms/validation.html">
                                    <span class="site-menu-title">Form Validation</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../forms/masks.html">
                                    <span class="site-menu-title">Form Masks</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../forms/editable.html">
                                    <span class="site-menu-title">Form Editable</span>
                                </a>
                            </li>
                            <li class="site-menu-item has-sub">
                                <a href="javascript:void(0)">
                                    <span class="site-menu-title">Editors</span>
                                    <span class="site-menu-arrow"></span>
                                </a>
                                <ul class="site-menu-sub">
                                    <li class="site-menu-item">
                                        <a class="animsition-link" href="../forms/editor-summernote.html">
                                            <span class="site-menu-title">Summernote</span>
                                        </a>
                                    </li>
                                    <li class="site-menu-item">
                                        <a class="animsition-link" href="../forms/editor-markdown.html">
                                            <span class="site-menu-title">Markdown</span>
                                        </a>
                                    </li>
                                    <li class="site-menu-item">
                                        <a class="animsition-link" href="../forms/editor-ace.html">
                                            <span class="site-menu-title">Ace Editor</span>
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../forms/image-cropping.html">
                                    <span class="site-menu-title">Image Cropping</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../forms/file-uploads.html">
                                    <span class="site-menu-title">File Uploads</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="site-menu-item has-sub">
                        <a href="javascript:void(0)">
                            <i class="site-menu-icon md-border-all" aria-hidden="true"></i>
                            <span class="site-menu-title">Tables</span>
                            <span class="site-menu-arrow"></span>
                        </a>
                        <ul class="site-menu-sub">
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../tables/basic.html">
                                    <span class="site-menu-title">Basic Tables</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../tables/bootstrap.html">
                                    <span class="site-menu-title">Bootstrap Tables</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../tables/floatthead.html">
                                    <span class="site-menu-title">floatThead</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../tables/responsive.html">
                                    <span class="site-menu-title">Responsive Tables</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../tables/editable.html">
                                    <span class="site-menu-title">Editable Tables</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../tables/jsgrid.html">
                                    <span class="site-menu-title">jsGrid</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../tables/footable.html">
                                    <span class="site-menu-title">FooTable</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../tables/datatable.html">
                                    <span class="site-menu-title">DataTables</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="site-menu-item has-sub">
                        <a href="javascript:void(0)">
                            <i class="site-menu-icon md-chart" aria-hidden="true"></i>
                            <span class="site-menu-title">Chart</span>
                            <span class="site-menu-arrow"></span>
                        </a>
                        <ul class="site-menu-sub">
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../charts/chartjs.html">
                                    <span class="site-menu-title">Chart.js</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../charts/gauges.html">
                                    <span class="site-menu-title">Gauges</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../charts/flot.html">
                                    <span class="site-menu-title">Flot</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../charts/peity.html">
                                    <span class="site-menu-title">Peity</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../charts/sparkline.html">
                                    <span class="site-menu-title">Sparkline</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../charts/morris.html">
                                    <span class="site-menu-title">Morris</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../charts/chartist.html">
                                    <span class="site-menu-title">Chartist.js</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../charts/rickshaw.html">
                                    <span class="site-menu-title">Rickshaw</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../charts/pie-progress.html">
                                    <span class="site-menu-title">Pie Progress</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../charts/c3.html">
                                    <span class="site-menu-title">C3</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="site-menu-category">Apps</li>
                    <li class="site-menu-item has-sub">
                        <a href="javascript:void(0)">
                            <i class="site-menu-icon md-apps" aria-hidden="true"></i>
                            <span class="site-menu-title">Apps</span>
                            <span class="site-menu-arrow"></span>
                        </a>
                        <ul class="site-menu-sub">
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../apps/contacts/contacts.html">
                                    <span class="site-menu-title">Contacts</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../apps/calendar/calendar.html">
                                    <span class="site-menu-title">Calendar</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../apps/notebook/notebook.html">
                                    <span class="site-menu-title">Notebook</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../apps/taskboard/taskboard.html">
                                    <span class="site-menu-title">Taskboard</span>
                                </a>
                            </li>
                            <li class="site-menu-item has-sub">
                                <a href="javascript:void(0)">
                                    <span class="site-menu-title">Documents</span>
                                    <span class="site-menu-arrow"></span>
                                </a>
                                <ul class="site-menu-sub">
                                    <li class="site-menu-item">
                                        <a class="animsition-link" href="../apps/documents/articles.html">
                                            <span class="site-menu-title">Articles</span>
                                        </a>
                                    </li>
                                    <li class="site-menu-item">
                                        <a class="animsition-link" href="../apps/documents/categories.html">
                                            <span class="site-menu-title">Categories</span>
                                        </a>
                                    </li>
                                    <li class="site-menu-item">
                                        <a class="animsition-link" href="../apps/documents/article.html">
                                            <span class="site-menu-title">Article</span>
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../apps/forum/forum.html">
                                    <span class="site-menu-title">Forum</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../apps/message/message.html">
                                    <span class="site-menu-title">Message</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../apps/projects/projects.html">
                                    <span class="site-menu-title">Projects</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../apps/mailbox/mailbox.html">
                                    <span class="site-menu-title">Mailbox</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../apps/media/overview.html">
                                    <span class="site-menu-title">Media</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../apps/work/work.html">
                                    <span class="site-menu-title">Work</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../apps/location/location.html">
                                    <span class="site-menu-title">Location</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="site-menu-category">Angular UI</li>
                    <li class="site-menu-item">
                        <a class="animsition-link" href="../angular/index.html">
                            <i class="site-menu-icon bd-angular" aria-hidden="true"></i>
                            <span class="site-menu-title">Angular UI</span>
                            <div class="site-menu-label">
                                <span class="label label-danger label-round">new</span>
                            </div>
                        </a>
                    </li>
                </ul>

                <div class="site-menubar-section">
                    <h5>
                        Milestone
                        <span class="pull-right">30%</span>
                    </h5>
                    <div class="progress progress-xs">
                        <div class="progress-bar active" style="width: 30%;" role="progressbar"></div>
                    </div>
                    <h5>
                        Release
                        <span class="pull-right">60%</span>
                    </h5>
                    <div class="progress progress-xs">
                        <div class="progress-bar progress-bar-warning" style="width: 60%;" role="progressbar"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="site-menubar-footer">
        <a href="javascript: void(0);" class="fold-show" data-placement="top" data-toggle="tooltip"
           data-original-title="Settings">
            <span class="icon md-settings" aria-hidden="true"></span>
        </a>
        <a href="javascript: void(0);" data-placement="top" data-toggle="tooltip" data-original-title="Lock">
            <span class="icon md-eye-off" aria-hidden="true"></span>
        </a>
        <a href="javascript: void(0);" data-placement="top" data-toggle="tooltip" data-original-title="Logout">
            <span class="icon md-power" aria-hidden="true"></span>
        </a>
    </div>
</div>
<div class="site-gridmenu">
    <div>
        <div>
            <ul>
                <li>
                    <a href="../apps/mailbox/mailbox.html">
                        <i class="icon md-email"></i>
                        <span>Mailbox</span>
                    </a>
                </li>
                <li>
                    <a href="../apps/calendar/calendar.html">
                        <i class="icon md-calendar"></i>
                        <span>Calendar</span>
                    </a>
                </li>
                <li>
                    <a href="../apps/contacts/contacts.html">
                        <i class="icon md-account"></i>
                        <span>Contacts</span>
                    </a>
                </li>
                <li>
                    <a href="../apps/media/overview.html">
                        <i class="icon md-videocam"></i>
                        <span>Media</span>
                    </a>
                </li>
                <li>
                    <a href="../apps/documents/categories.html">
                        <i class="icon md-receipt"></i>
                        <span>Documents</span>
                    </a>
                </li>
                <li>
                    <a href="../apps/projects/projects.html">
                        <i class="icon md-image"></i>
                        <span>Project</span>
                    </a>
                </li>
                <li>
                    <a href="../apps/forum/forum.html">
                        <i class="icon md-comments"></i>
                        <span>Forum</span>
                    </a>
                </li>
                <li>
                    <a href="../index.html">
                        <i class="icon md-view-dashboard"></i>
                        <span>Dashboard</span>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>


<!-- Page -->
<div class="page animsition">
    <div class="page-header">
        <ol class="breadcrumb">
            <li><a href="../index.html">Home</a></li>
            <li class="active">Basic UI</li>
        </ol>
        <h1 class="page-title">Buttons</h1>
        <div class="page-header-actions">
            <button type="button" class="btn btn-sm btn-icon btn-primary btn-round" data-toggle="tooltip"
                    data-original-title="Edit">
                <i class="icon md-edit" aria-hidden="true"></i>
            </button>
            <button type="button" class="btn btn-sm btn-icon btn-primary btn-round" data-toggle="tooltip"
                    data-original-title="Refresh">
                <i class="icon md-refresh-alt" aria-hidden="true"></i>
            </button>
            <button type="button" class="btn btn-sm btn-icon btn-primary btn-round" data-toggle="tooltip"
                    data-original-title="Setting">
                <i class="icon md-settings" aria-hidden="true"></i>
            </button>
        </div>
    </div>
    <div class="page-content">
        <!-- Panel General Button -->
        <div class="panel">
            <div class="panel-heading">
                <h3 class="panel-title">General Button</h3>
            </div>

            <div class="panel-body container-fluid">
                <div class="row row-lg">
                    <div class="col-lg-12">
                        <!-- Example Default Button -->
                        <div class="example-wrap">
                            <h4 class="example-title">Default Button</h4>
                            <p>Use any of the available button classes to quickly create a styled
                                button . We provide a variety of colors for you to express different
                                emotions.</p>
                            <div class="row">
                                <div class="col-xs-12 col-sm-4 col-lg-2">
                                    <div class="example">
                                        <ul class="list-unstyled">
                                            <li class="margin-bottom-20">
                                                <button type="button" class="btn btn-block btn-default">Default</button>
                                            </li>
                                            <li class="margin-bottom-20">
                                                <div class="pull-left color-box bg-grey-300"></div>
                                                <div class="margin-left-35">
                                                    <p class="font-size-14 grey-600 margin-0">Normal</p>
                                                    <span class="font-size-12">#e0e0e0</span>
                                                </div>
                                            </li>
                                            <li class="margin-bottom-20">
                                                <div class="pull-left color-box bg-grey-200"></div>
                                                <div class="margin-left-35">
                                                    <p class="font-size-14 grey-600 margin-0">Hover</p>
                                                    <span class="font-size-12">#eeeeee</span>
                                                </div>
                                            </li>
                                            <li class="margin-bottom-20">
                                                <div class="pull-left color-box bg-grey-400"></div>
                                                <div class="margin-left-35">
                                                    <p class="font-size-14 grey-600 margin-0">active</p>
                                                    <span class="font-size-12">#bdbdbd</span>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                </div>

                                <div class="col-xs-12 col-sm-4 col-lg-2">
                                    <div class="example">
                                        <ul class="list-unstyled">
                                            <li class="margin-bottom-20">
                                                <button type="button" class="btn btn-block btn-primary">Primary</button>
                                            </li>
                                            <li class="margin-bottom-20">
                                                <div class="pull-left color-box bg-primary-500"></div>
                                                <div class="margin-left-35">
                                                    <p class="font-size-14 grey-600 margin-0">Normal</p>
                                                    <span class="font-size-12">#3f51b5</span>
                                                </div>
                                            </li>
                                            <li class="margin-bottom-20">
                                                <div class="pull-left color-box bg-primary-400"></div>
                                                <div class="margin-left-35">
                                                    <p class="font-size-14 grey-600 margin-0">Hover</p>
                                                    <span class="font-size-12">#5c6bc0</span>
                                                </div>
                                            </li>
                                            <li class="margin-bottom-20">
                                                <div class="pull-left color-box bg-primary-600"></div>
                                                <div class="margin-left-35">
                                                    <p class="font-size-14 grey-600 margin-0">active</p>
                                                    <span class="font-size-12">#3949ab</span>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                </div>

                                <div class="col-xs-12 col-sm-4 col-lg-2">
                                    <div class="example">
                                        <ul class="list-unstyled">
                                            <li class="margin-bottom-20">
                                                <button type="button" class="btn btn-block btn-success">Success</button>
                                            </li>
                                            <li class="margin-bottom-20">
                                                <div class="pull-left color-box bg-green-500"></div>
                                                <div class="margin-left-35">
                                                    <p class="font-size-14 grey-600 margin-0">Normal</p>
                                                    <span class="font-size-12">#4caf50</span>
                                                </div>
                                            </li>
                                            <li class="margin-bottom-20">
                                                <div class="pull-left color-box bg-green-400"></div>
                                                <div class="margin-left-35">
                                                    <p class="font-size-14 grey-600 margin-0">Hover</p>
                                                    <span class="font-size-12">#66bb6a</span>
                                                </div>
                                            </li>
                                            <li class="margin-bottom-20">
                                                <div class="pull-left color-box bg-green-600"></div>
                                                <div class="margin-left-35">
                                                    <p class="font-size-14 grey-600 margin-0">active</p>
                                                    <span class="font-size-12">#43a047</span>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                </div>

                                <div class="col-xs-12 col-sm-4 col-lg-2">
                                    <div class="example">
                                        <ul class="list-unstyled">
                                            <li class="margin-bottom-20">
                                                <button type="button" class="btn btn-block btn-info">Info</button>
                                            </li>
                                            <li class="margin-bottom-20">
                                                <div class="pull-left color-box bg-cyan-500"></div>
                                                <div class="margin-left-35">
                                                    <p class="font-size-14 grey-600 margin-0">Normal</p>
                                                    <span class="font-size-12">#00bcd4</span>
                                                </div>
                                            </li>
                                            <li class="margin-bottom-20">
                                                <div class="pull-left color-box bg-cyan-400"></div>
                                                <div class="margin-left-35">
                                                    <p class="font-size-14 grey-600 margin-0">Hover</p>
                                                    <span class="font-size-12">#26c6da</span>
                                                </div>
                                            </li>
                                            <li class="margin-bottom-20">
                                                <div class="pull-left color-box bg-cyan-600"></div>
                                                <div class="margin-left-35">
                                                    <p class="font-size-14 grey-600 margin-0">active</p>
                                                    <span class="font-size-12">#00acc1</span>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                </div>

                                <div class="col-xs-12 col-sm-4 col-lg-2">
                                    <div class="example">
                                        <ul class="list-unstyled">
                                            <li class="margin-bottom-20">
                                                <button type="button" class="btn btn-block btn-warning">Warning</button>
                                            </li>
                                            <li class="margin-bottom-20">
                                                <div class="pull-left color-box bg-orange-500"></div>
                                                <div class="margin-left-35">
                                                    <p class="font-size-14 grey-600 margin-0">Normal</p>
                                                    <span class="font-size-12">#ff9800</span>
                                                </div>
                                            </li>
                                            <li class="margin-bottom-20">
                                                <div class="pull-left color-box bg-orange-400"></div>
                                                <div class="margin-left-35">
                                                    <p class="font-size-14 grey-600 margin-0">Hover</p>
                                                    <span class="font-size-12">#ffa726</span>
                                                </div>
                                            </li>
                                            <li class="margin-bottom-20">
                                                <div class="pull-left color-box bg-orange-600"></div>
                                                <div class="margin-left-35">
                                                    <p class="font-size-14 grey-600 margin-0">active</p>
                                                    <span class="font-size-12">#fb8c00</span>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                </div>

                                <div class="col-xs-12 col-sm-4 col-lg-2">
                                    <div class="example">
                                        <ul class="list-unstyled">
                                            <li class="margin-bottom-20">
                                                <button type="button" class="btn btn-block btn-danger">Danger</button>
                                            </li>
                                            <li class="margin-bottom-20">
                                                <div class="pull-left color-box bg-red-500"></div>
                                                <div class="margin-left-35">
                                                    <p class="font-size-14 grey-600 margin-0">Normal</p>
                                                    <span class="font-size-12">#f44336</span>
                                                </div>
                                            </li>
                                            <li class="margin-bottom-20">
                                                <div class="pull-left color-box bg-red-400"></div>
                                                <div class="margin-left-35">
                                                    <p class="font-size-14 grey-600 margin-0">Hover</p>
                                                    <span class="font-size-12">#ef5350</span>
                                                </div>
                                            </li>
                                            <li class="margin-bottom-20">
                                                <div class="pull-left color-box bg-red-600"></div>
                                                <div class="margin-left-35">
                                                    <p class="font-size-14 grey-600 margin-0">active</p>
                                                    <span class="font-size-12">#e53935</span>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- End Example Default Button -->
                    </div>
                </div>

                <div class="row row-lg">
                    <div class="col-md-6">
                        <!-- Example Sizing -->
                        <div class="example-wrap">
                            <h4 class="example-title">Sizing</h4>
                            <p>Size might vary from smaller screen to a larger screen. We made
                                few sizes that are pixel perfect and resposive.
                                <br/> Fancy larger or smaller buttons? Add <code>.btn-lg</code>, <code>.btn-sm</code>,
                                or <code>.btn-xs</code> for additional sizes.</p>
                            <div class="example example-buttons">
                                <button type="button" class="btn btn-info btn-lg">Large Button</button>
                                <button type="button" class="btn btn-info">Default Button</button>
                                <button type="button" class="btn btn-info btn-sm">Small Button</button>
                                <button type="button" class="btn btn-info btn-xs">Tiny Button</button>
                            </div>
                        </div>
                        <!-- End Example Sizing -->
                    </div>

                    <div class="col-md-6">
                        <!-- Example Rounded Button / Squard Button -->
                        <div class="example-wrap">
                            <h4 class="example-title">Rounded Button / Squard Button</h4>
                            <p>Round button and the square button can be used to distinguish th
                                different behavior or style.</p>
                            <div class="row">
                                <div class="col-sm-6">
                                    <div class="example example-buttons">
                                        <div>
                                            <button type="button" class="btn btn-round btn-info btn-lg">Large</button>
                                        </div>
                                        <div>
                                            <button type="button" class="btn btn-round btn-info">Default</button>
                                        </div>
                                        <div>
                                            <button type="button" class="btn btn-round btn-info btn-sm">Small</button>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-sm-6">
                                    <div class="example example-buttons">
                                        <div>
                                            <button type="button" class="btn btn-squared btn-info btn-lg">Large</button>
                                        </div>
                                        <div>
                                            <button type="button" class="btn btn-squared btn-info">Default</button>
                                        </div>
                                        <div>
                                            <button type="button" class="btn btn-squared btn-info btn-sm">Small</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- End Example Rounded Button / Squard Button -->
                    </div>
                </div>

                <div class="row row-lg">
                    <div class="col-md-6">
                        <!-- Example Block Button With Icon -->
                        <div class="example-wrap">
                            <h4 class="example-title">Block Button With Icon</h4>
                            <p>Create block level buttons,with by adding add <code>.btn-block</code>                  .</p>
                            <div class="example example-buttons">
                                <button type="button" class="btn btn-info btn-block"><i class="icon md-menu pull-right" aria-hidden="true"></i>Default</button>
                                <button type="button" class="btn btn-primary btn-block btn-round"><i class="icon md-menu" aria-hidden="true"></i>Round</button>
                            </div>
                        </div>
                        <!-- End Example Block Button With Icon -->
                    </div>

                    <div class="col-md-6">
                        <!-- Example Pill Left Or Right -->
                        <div class="example-wrap">
                            <h4 class="example-title">Pill Left Or Right</h4>
                            <p>Create a button like pill by <code>.btn-pill-left</code> or <code>.btn-pill-right</code>                  with <code>.btn-round</code>.</p>
                            <div class="example example-buttons">
                                <div>
                                    <button type="button" class="btn btn-round btn-primary btn-pill-left">Pill Left</button>
                                    <button type="button" class="btn btn-round btn-primary btn-pill-right">Pill Right</button>
                                </div>
                            </div>
                        </div>
                        <!-- End Example Pill Left Or Right -->
                    </div>
                </div>

                <div class="row row-lg">
                    <div class="col-md-6 col-lg-4">
                        <!-- Example Flat And Raised Button -->
                        <div class="example-wrap">
                            <h4 class="example-title">Flat And Raised Button</h4>
                            <p>Raised buttons behave like a piece of material resting on another
                                sheet – they lift and color on press.
                                <br/> Flat buttons are printed on the material. They do not lift but
                                fill with color on press.</p>
                            <div class="row">
                                <div class="col-sm-6">
                                    <div class="example example-buttons">
                                        <button type="button" class="btn btn-raised btn-primary btn-block">Normal</button>
                                        <button type="button" class="btn btn-raised btn-primary btn-block example-primary-hover">Hover</button>
                                        <button type="button" class="btn btn-raised btn-primary btn-block active">Active</button>
                                        <button type="button" class="btn btn-raised btn-primary btn-block disabled">Disabled</button>
                                    </div>
                                </div>

                                <div class="col-sm-6">
                                    <div class="example example-buttons">
                                        <button type="button" class="btn btn-flat btn-default btn-block">Normal</button>
                                        <button type="button" class="btn btn-flat btn-default btn-block example-default-hover">Hover</button>
                                        <button type="button" class="btn btn-flat btn-default btn-block active">Active</button>
                                        <button type="button" class="btn btn-flat btn-default btn-block disabled">Disabled</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- End Example Flat And Raised Button -->
                    </div>

                    <div class="col-md-6 col-lg-4">
                        <!-- Example Floating Button -->
                        <div class="example-wrap">
                            <h4 class="example-title">Floating Button</h4>
                            <p>Floating action buttons are used for a special type of promoted
                                action. They are distinguished by a circled icon floating above
                                the UI and have special motion behaviors related to morphing,
                                launching, and the transferring anchor point.
                                <br /> Use the default class <code>.btn</code> with an additional class
                                <code>.btn-floating</code> .</p>
                            <div class="example example-buttons">
                                <button type="button" class="btn btn-floating btn-success"><i class="icon md-edit" aria-hidden="true"></i></button>
                                <button type="button" class="btn btn-floating btn-success btn-sm"><i class="icon md-edit" aria-hidden="true"></i></button>
                                <button type="button" class="btn btn-floating btn-info"><i class="icon md-plus" aria-hidden="true"></i></button>
                                <button type="button" class="btn btn-floating btn-info btn-sm"><i class="icon md-plus" aria-hidden="true"></i></button>
                            </div>
                        </div>
                        <!-- End Example Floating Button -->
                    </div>

                    <div class="clearfix visible-md-block"></div>

                    <div class="col-md-6 col-lg-4">
                        <!-- Example Button Animation -->
                        <div class="example-wrap">
                            <h4 class="example-title">Button Animation</h4>
                            <p>A button can animate to show hidden content. Modern and subtle
                                styles &amp; effects for buttons.</p>
                            <div class="example example-buttons">
                                <button type="button" class="btn btn-animate btn-animate-side btn-success">
                                    <span><i class="icon md-download" aria-hidden="true"></i>Side Animation</span>
                                </button>
                                <button type="button" class="btn btn-animate btn-animate-vertical btn-success">
                    <span><i class="icon md-download" aria-hidden="true"></i>Vertical
                      Animation</span>
                                </button>
                            </div>
                        </div>
                        <!-- End Example Button Animation -->
                    </div>

                    <div class="clearfix visible-lg-block"></div>

                    <div class="col-md-6 col-lg-4">
                        <!-- Example Button With Icon -->
                        <div class="example-wrap">
                            <h4 class="example-title">Button With Icon</h4>
                            <p>Basic buttons are traditional buttons with borders and background
                                with an extra commponent like an icon. You can place it either
                                on the left or the right which ever you want with different color
                                opitons.</p>
                            <div class="example example-buttons">
                                <button type="button" class="btn btn-dark"><i class="icon md-upload" aria-hidden="true"></i> Upload</button>
                                <button type="button" class="btn btn-warning"><i class="icon md-thumb-up" aria-hidden="true"></i> I like</button>
                                <button type="button" class="btn btn-success"><i class="icon md-check" aria-hidden="true"></i> I agree</button>
                                <button type="button" class="btn btn-primary"><i class="icon md-plus" aria-hidden="true"></i> More</button>
                                <button type="button" class="btn btn-danger"><i class="icon md-link" aria-hidden="true"></i> Link</button>
                                <button type="button" class="btn btn-info"><i class="icon md-comment" aria-hidden="true"></i> Comment</button>
                            </div>
                        </div>
                        <!-- End Example Button With Icon -->
                    </div>

                    <div class="clearfix visible-md-block"></div>

                    <div class="col-md-6 col-lg-4">
                        <!-- Example Icon Button -->
                        <div class="example-wrap">
                            <h4 class="example-title">Icon Button</h4>
                            <p>Icon only button.</p>
                            <div class="example example-buttons">
                                <button type="button" class="btn btn-icon btn-default"><i class="icon md-pin" aria-hidden="true"></i></button>
                                <button type="button" class="btn btn-icon btn-primary"><i class="icon md-apps" aria-hidden="true"></i></button>
                                <button type="button" class="btn btn-icon btn-success"><i class="icon md-notifications" aria-hidden="true"></i></button>
                                <button type="button" class="btn btn-icon btn-info"><i class="icon md-calendar" aria-hidden="true"></i></button>
                                <button type="button" class="btn btn-icon btn-warning btn-round"><i class="icon md-time" aria-hidden="true"></i></button>
                                <button type="button" class="btn btn-icon btn-danger btn-round"><i class="icon md-roller" aria-hidden="true"></i></button>
                                <button type="button" class="btn btn-icon btn-dark btn-round"><i class="icon md-chart-donut" aria-hidden="true"></i></button>
                                <button type="button" class="btn btn-pure btn-default icon md-lock"></button>
                                <button type="button" class="btn btn-pure btn-primary icon md-thumb-up"></button>
                                <button type="button" class="btn btn-pure btn-success icon md-share"></button>
                                <button type="button" class="btn btn-pure btn-info icon md-shuffle"></button>
                                <button type="button" class="btn btn-pure btn-warning icon md-star"></button>
                                <button type="button" class="btn btn-pure btn-danger icon md-print"></button>
                                <button type="button" class="btn btn-pure btn-dark icon md-flag"></button>
                            </div>
                        </div>
                        <!-- End Example Icon Button -->
                    </div>

                    <div class="col-md-6 col-lg-4">
                        <!-- Example Icon Dropdown -->
                        <div class="example-wrap">
                            <h4 class="example-title">Icon Dropdown</h4>
                            <p>Icon used in the dropdown.</p>
                            <div class="example example-buttons">
                                <div class="btn-group" role="group">
                                    <button type="button" class="btn btn-primary dropdown-toggle" id="exampleIconDropdown1"
                                            data-toggle="dropdown" aria-expanded="false">
                                        <i class="icon md-apps" aria-hidden="true"></i>
                                        <span class="caret"></span>
                                    </button>
                                    <ul class="dropdown-menu" aria-labelledby="exampleIconDropdown1" role="menu">
                                        <li role="presentation"><a href="javascript:void(0)" role="menuitem">Dropdown link</a></li>
                                        <li role="presentation"><a href="javascript:void(0)" role="menuitem">Dropdown link</a></li>
                                    </ul>
                                </div>
                                <div class="btn-group" role="group">
                                    <button type="button" class="btn btn-warning dropdown-toggle" id="exampleIconDropdown2"
                                            data-toggle="dropdown" aria-expanded="false">
                                        <i class="icon md-favorite" aria-hidden="true"></i>
                                        <span class="caret"></span>
                                    </button>
                                    <ul class="dropdown-menu" aria-labelledby="exampleIconDropdown2" role="menu">
                                        <li role="presentation"><a href="javascript:void(0)" role="menuitem">Dropdown link</a></li>
                                        <li role="presentation"><a href="javascript:void(0)" role="menuitem">Dropdown link</a></li>
                                    </ul>
                                </div>
                                <div class="btn-group" role="group">
                                    <button type="button" class="btn btn-info dropdown-toggle" id="exampleIconDropdown3"
                                            data-toggle="dropdown" aria-expanded="false">
                                        <i class="icon md-calendar" aria-hidden="true"></i>
                                        <span class="caret"></span>
                                    </button>
                                    <ul class="dropdown-menu" aria-labelledby="exampleIconDropdown3" role="menu">
                                        <li role="presentation"><a href="javascript:void(0)" role="menuitem">Dropdown link</a></li>
                                        <li role="presentation"><a href="javascript:void(0)" role="menuitem">Dropdown link</a></li>
                                    </ul>
                                </div>
                                <div class="btn-group" role="group">
                                    <button type="button" class="btn btn-dark dropdown-toggle" id="exampleIconDropdown4"
                                            data-toggle="dropdown" aria-expanded="false">
                                        <i class="icon md-chart-donut" aria-hidden="true"></i>
                                        <span class="caret"></span>
                                    </button>
                                    <ul class="dropdown-menu" aria-labelledby="exampleIconDropdown4" role="menu">
                                        <li role="presentation"><a href="javascript:void(0)" role="menuitem">Dropdown link</a></li>
                                        <li role="presentation"><a href="javascript:void(0)" role="menuitem">Dropdown link</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <!-- End Example Icon Dropdown -->
                    </div>

                    <div class="clearfix visible-lg-block visible-md-block"></div>

                    <div class="col-md-6 col-lg-4">
                        <!-- Example Social Button Sizes -->
                        <div class="example-wrap margin-md-0">
                            <h4 class="example-title">Social Button Sizes</h4>
                            <p>Different Sizes for you to use with icon button or icon only button.</p>
                            <div class="example example-buttons">
                                <ul class="list-unstyled pull-left">
                                    <li>
                                        <button type="button" class="btn btn-labeled btn-lg social-facebook">
                                            <span class="btn-label"><i class="icon bd-facebook" aria-hidden="true"></i></span>Facebook</button>
                                    </li>
                                    <li>
                                        <button type="button" class="btn btn-labeled social-facebook">
                                            <span class="btn-label"><i class="icon bd-facebook" aria-hidden="true"></i></span>Facebook</button>
                                    </li>
                                    <li>
                                        <button type="button" class="btn btn-labeled btn-sm social-facebook">
                                            <span class="btn-label"><i class="icon bd-facebook" aria-hidden="true"></i></span>Facebook</button>
                                    </li>
                                    <li>
                                        <button type="button" class="btn btn-labeled btn-xs social-facebook">
                                            <span class="btn-label"><i class="icon bd-facebook" aria-hidden="true"></i></span>Facebook</button>
                                    </li>
                                </ul>

                                <ul class="list-unstyled">
                                    <li>
                                        <button type="button" class="btn btn-icon btn-lg social-facebook"><i class="icon bd-facebook" aria-hidden="true"></i></button>
                                    </li>
                                    <li>
                                        <button type="button" class="btn btn-icon social-facebook"><i class="icon bd-facebook" aria-hidden="true"></i></button>
                                    </li>
                                    <li>
                                        <button type="button" class="btn btn-icon btn-sm social-facebook"><i class="icon bd-facebook" aria-hidden="true"></i></button>
                                    </li>
                                    <li>
                                        <button type="button" class="btn btn-icon btn-xs social-facebook"><i class="icon bd-facebook" aria-hidden="true"></i></button>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <!-- End Example Social Button Sizes -->
                    </div>

                    <div class="col-md-6 col-lg-4">
                        <!-- Example Social In Labels -->
                        <div class="example-wrap margin-lg-0">
                            <h4 class="example-title">Social In Labels</h4>
                            <p>It is often used at the top of a page or section. An social icon
                                must be with this variation.</p>
                            <div class="example example-buttons">
                                <button type="button" class="btn btn-labeled social-facebook">
                                    <span class="btn-label"><i class="icon bd-facebook" aria-hidden="true"></i></span>Facebook</button>
                                <button type="button" class="btn btn-labeled social-twitter">
                                    <span class="btn-label"><i class="icon bd-twitter" aria-hidden="true"></i></span>Twitter</button>
                                <button type="button" class="btn btn-labeled social-google-plus">
                                    <span class="btn-label"><i class="icon bd-google-plus" aria-hidden="true"></i></span>Google+</button>
                                <button type="button" class="btn btn-labeled social-linkedin">
                                    <span class="btn-label"><i class="icon bd-linkedin" aria-hidden="true"></i></span>Linkedin</button>
                                <button type="button" class="btn btn-labeled social-flickr">
                                    <span class="btn-label"><i class="icon bd-flickr" aria-hidden="true"></i></span>Flickr</button>
                                <button type="button" class="btn btn-labeled social-tumblr">
                                    <span class="btn-label"><i class="icon bd-tumblr" aria-hidden="true"></i></span>Tumblr</button>
                            </div>
                        </div>
                        <!-- End Example Social In Labels -->
                    </div>

                    <div class="clearfix visible-md-block"></div>

                    <div class="col-md-6 col-lg-4">
                        <!-- Example Social Icon Button -->
                        <div class="example-wrap">
                            <h4 class="example-title">Social Icon Button</h4>
                            <p>Icon only button. But icon is social icon. </p>
                            <div class="example example-buttons">
                                <button type="button" class="btn btn-icon social-facebook"><i class="icon bd-facebook" aria-hidden="true"></i></button>
                                <button type="button" class="btn btn-icon social-twitter"><i class="icon bd-twitter" aria-hidden="true"></i></button>
                                <button type="button" class="btn btn-icon social-linkedin"><i class="icon bd-linkedin" aria-hidden="true"></i></button>
                                <button type="button" class="btn btn-icon social-dribbble"><i class="icon bd-dribbble" aria-hidden="true"></i></button>
                                <button type="button" class="btn btn-icon social-instagram"><i class="icon bd-instagram" aria-hidden="true"></i></button>
                                <button type="button" class="btn btn-icon social-github"><i class="icon bd-github" aria-hidden="true"></i></button>
                                <button type="button" class="btn btn-icon social-skype"><i class="icon bd-skype" aria-hidden="true"></i></button>
                                <button type="button" class="btn btn-icon social-youtube"><i class="icon bd-youtube" aria-hidden="true"></i></button>
                                <button type="button" class="btn btn-icon social-evernote"><i class="icon bd-evernote" aria-hidden="true"></i></button>
                                <button type="button" class="btn btn-icon social-google-plus"><i class="icon bd-google-plus" aria-hidden="true"></i></button>
                            </div>
                        </div>
                        <!-- End Example Social Icon Button -->
                    </div>

                    <div class="clearfix visible-lg-block"></div>

                    <div class="col-md-6 col-lg-4">
                        <!-- Example Icon Block Button -->
                        <div class="example-wrap">
                            <h4 class="example-title">Icon Block Button</h4>
                            <p>Icon only block button. </p>
                            <div class="example example-buttons">
                                <button type="button" class="btn btn-icon btn-block btn-primary"><i class="icon md-favorite" aria-hidden="true"></i></button>
                                <button type="button" class="btn btn-icon btn-block social-twitter"><i class="icon bd-twitter" aria-hidden="true"></i></button>
                            </div>
                        </div>
                        <!-- End Example Icon Block Button -->
                    </div>

                    <div class="col-md-6 col-lg-8">
                        <!-- Example Button with Waves -->
                        <div class="example-wrap">
                            <h4 class="example-title">Button with Waves</h4>
                            <p>The styles of waves. </p>
                            <div class="example example-buttons">
                                <button type="button" class="btn btn-flat">Default</button>
                                <button type="button" class="btn btn-flat waves-classic">Classic</button>
                                <button type="button" class="btn btn-flat waves-red">Red</button>
                                <button type="button" class="btn btn-flat waves-purple">Purple</button>
                                <button type="button" class="btn btn-flat waves-light-blue">Light Blue</button>
                                <button type="button" class="btn btn-flat waves-teal">Teal</button>
                                <button type="button" class="btn btn-flat waves-green">Green</button>
                                <button type="button" class="btn btn-flat waves-yellow">Yellow</button>
                                <button type="button" class="btn btn-flat waves-orange">Orange</button>
                                <button type="button" class="btn btn-flat waves-brown">Brown</button>
                                <button type="button" class="btn btn-dark waves-light">Light</button>
                            </div>
                        </div>
                        <!-- End Example Button with Waves -->
                    </div>
                </div>
            </div>
        </div>
        <!-- End Panel General Button -->

        <!-- Panel Button Group -->
        <div class="panel">
            <div class="panel-heading">
                <h3 class="panel-title">Button Group</h3>
            </div>
            <div class="panel-body container-fluid">
                <div class="row row-lg">
                    <div class="col-lg-4 col-md-6">
                        <!-- Example Basic Button Group -->
                        <div class="example-wrap">
                            <h4 class="example-title">Basic Button Group</h4>
                            <p>Grouped buttons give users access to frequently performed actions
                                of a focused task. Wrap a series of buttons with <code>.btn</code>                  in <code>.btn-group.</code></p>
                            <div class="example example-buttons">
                                <div class="btn-group btn-group-flat" aria-label="Basic example" role="group">
                                    <button type="button" class="btn btn-icon btn-pure btn-default"><i class="icon md-play" aria-hidden="true"></i></button>
                                    <button type="button" class="btn btn-icon btn-pure btn-primary"><i class="icon md-pause" aria-hidden="true"></i></button>
                                    <button type="button" class="btn btn-icon btn-pure btn-info"><i class="icon md-stop" aria-hidden="true"></i></button>
                                </div>

                                <div class="btn-group" aria-label="Basic example" role="group">
                                    <button type="button" class="btn btn-icon btn-primary"><i class="icon md-play" aria-hidden="true"></i></button>
                                    <button type="button" class="btn btn-icon btn-primary"><i class="icon md-pause" aria-hidden="true"></i></button>
                                    <button type="button" class="btn btn-icon btn-primary"><i class="icon md-stop" aria-hidden="true"></i></button>
                                </div>

                                <div class="btn-group" aria-label="Basic example" role="group">
                                    <button type="button" class="btn btn-info"><i class="icon md-edit" aria-hidden="true"></i>Edit</button>
                                    <button type="button" class="btn btn-info"><i class="icon md-mail-reply" aria-hidden="true"></i>Reply</button>
                                    <button type="button" class="btn btn-info"><i class="icon md-share" aria-hidden="true"></i>Share</button>
                                </div>

                                <div class="btn-group" aria-label="Basic example" role="group">
                                    <button type="button" class="btn btn-info">Left</button>
                                    <button type="button" class="btn btn-info">Middle</button>
                                    <button type="button" class="btn btn-info">Right</button>
                                </div>
                            </div>
                        </div>
                        <!-- End Example Basic Button Group -->
                    </div>

                    <div class="col-lg-4 col-md-6">
                        <!-- Example Vertical Button Group -->
                        <div class="example-wrap">
                            <h4 class="example-title">Vertical Button Group</h4>
                            <p>Order the buttons in a group for actions that are used regularly
                                or are significant.</p>
                            <div class="example example-buttons">
                                <div class="btn-group-vertical" aria-label="Vertical button group" role="group">
                                    <button type="button" class="btn btn-info"><i class="icon md-flag" aria-hidden="true"></i></button>
                                    <button type="button" class="btn btn-info"><i class="icon md-wrench" aria-hidden="true"></i></button>
                                    <button type="button" class="btn btn-info"><i class="icon md-print" aria-hidden="true"></i></button>
                                </div>

                                <div class="btn-group-vertical" aria-label="Vertical button group" role="group">
                                    <button type="button" class="btn btn-info">1</button>
                                    <button type="button" class="btn btn-info">2</button>
                                    <button type="button" class="btn btn-info">3</button>
                                </div>

                                <div class="btn-group-vertical" aria-label="Vertical button group" role="group">
                                    <button type="button" class="btn btn-primary">Left</button>
                                    <button type="button" class="btn btn-primary">Middle</button>
                                    <button type="button" class="btn btn-primary">Right</button>
                                </div>
                            </div>
                        </div>
                        <!-- End Example Vertical Button Group -->
                    </div>

                    <div class="clearfix visible-md-block"></div>

                    <div class="col-lg-4 col-md-6">
                        <!-- Example Button Group Sizes -->
                        <div class="example-wrap">
                            <h4 class="example-title">Button Group Sizes</h4>
                            <p>Instead of applying button sizing classes to every button in a
                                group, just add <code>.btn-group-*</code> to each <code>.btn-group</code>,
                                including when nesting multiple groups.</p>
                            <div class="example example-buttons">
                                <div>
                                    <div class="btn-group btn-group-lg" aria-label="Large button group" role="group">
                                        <button type="button" class="btn btn-info">Left</button>
                                        <button type="button" class="btn btn-info">Middle</button>
                                        <button type="button" class="btn btn-info">Right</button>
                                    </div>
                                </div>

                                <div>
                                    <div class="btn-group" aria-label="Default button group" role="group">
                                        <button type="button" class="btn btn-info">Left</button>
                                        <button type="button" class="btn btn-info">Middle</button>
                                        <button type="button" class="btn btn-info">Right</button>
                                    </div>
                                </div>

                                <div>
                                    <div class="btn-group btn-group-sm" aria-label="Small button group" role="group">
                                        <button type="button" class="btn btn-info">Left</button>
                                        <button type="button" class="btn btn-info">Middle</button>
                                        <button type="button" class="btn btn-info">Right</button>
                                    </div>
                                </div>

                                <div>
                                    <div class="btn-group btn-group-xs" aria-label="Extra-small button group" role="group">
                                        <button type="button" class="btn btn-info">Left</button>
                                        <button type="button" class="btn btn-info">Middle</button>
                                        <button type="button" class="btn btn-info">Right</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- End Example Button Group Sizes -->
                    </div>

                    <div class="col-lg-4 col-md-6">
                        <!-- Example Button Toolbar -->
                        <div class="example-wrap">
                            <h4 class="example-title">Button Toolbar</h4>
                            <p>This group button is used to show the close relationship between
                                a number of buttons, and is usually used on edit page.</p>
                            <div class="example example-buttons">
                                <div class="btn-toolbar" aria-label="Toolbar with button groups" role="toolbar">
                                    <div class="btn-group">
                                        <button type="button" class="btn btn-icon btn-primary"><i class="icon md-format-bold" aria-hidden="true"></i></button>
                                        <button type="button" class="btn btn-icon btn-primary"><i class="icon md-format-italic" aria-hidden="true"></i></button>
                                        <button type="button" class="btn btn-icon btn-primary"><i class="icon md-format-underlined" aria-hidden="true"></i></button>
                                    </div>

                                    <div class="btn-group">
                                        <button type="button" class="btn btn-icon btn-primary"><i class="icon md-format-align-left" aria-hidden="true"></i></button>
                                        <button type="button" class="btn btn-icon btn-primary"><i class="icon md-format-align-center" aria-hidden="true"></i></button>
                                        <button type="button" class="btn btn-icon btn-primary"><i class="icon md-format-align-right" aria-hidden="true"></i></button>
                                    </div>

                                    <div class="btn-group">
                                        <button type="button" class="btn btn-icon btn-primary dropdown-toggle" data-toggle="dropdown"
                                                aria-expanded="false" aria-hidden="true">
                                            <i class="icon md-wrench" aria-hidden="true"></i>
                                        </button>
                                        <ul class="dropdown-menu" role="menu">
                                            <li role="presentation">
                                                <a href="javascript:void(0)" role="menuitem">
                                                    <i class="icon md-scissors" aria-hidden="true"></i>                            Cut
                                                </a>
                                            </li>
                                            <li role="presentation">
                                                <a href="javascript:void(0)" role="menuitem">
                                                    <i class="icon md-copy" aria-hidden="true"></i> Copy
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="btn-toolbar" aria-label="Toolbar with button groups" role="toolbar">
                                    <div class="btn-group" role="group">
                                        <button type="button" class="btn btn-icon btn-info"><i class="icon md-file" aria-hidden="true"></i></button>
                                        <button type="button" class="btn btn-icon btn-info"><i class="icon md-edit" aria-hidden="true"></i></button>
                                        <button type="button" class="btn btn-icon btn-info"><i class="icon md-folder" aria-hidden="true"></i></button>
                                        <button type="button" class="btn btn-icon btn-info"><i class="icon md-delete" aria-hidden="true"></i></button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- End Example Button Toolbar -->
                    </div>

                    <div class="clearfix visible-md-block"></div>

                    <div class="col-lg-4 col-md-6">
                        <!-- Example Nesting Button Group -->
                        <div class="example-wrap">
                            <h4 class="example-title">Nesting Button Group</h4>
                            <p>Place a <code>.btn-group</code> within another <code>.btn-group</code>                  when you want dropdown menus mixed with a series of buttons.</p>
                            <div class="example example-buttons">
                                <div class="btn-group" aria-label="Button group with nested dropdown" role="group">
                                    <button type="button" class="btn btn-primary">1</button>
                                    <button type="button" class="btn btn-primary">2</button>
                                    <div class="btn-group" role="group">
                                        <button type="button" class="btn btn-primary dropdown-toggle" id="exampleGroupDrop1"
                                                data-toggle="dropdown" aria-expanded="false">
                                            Dropdown
                                            <span class="caret"></span>
                                        </button>
                                        <ul class="dropdown-menu" aria-labelledby="exampleGroupDrop1" role="menu">
                                            <li role="presentation"><a href="javascript:void(0)" role="menuitem">Dropdown link</a></li>
                                            <li role="presentation"><a href="javascript:void(0)" role="menuitem">Dropdown link</a></li>
                                        </ul>
                                    </div>
                                </div>

                                <div class="btn-group" aria-label="Button group with nested dropdown" role="group">
                                    <button type="button" class="btn btn-info">1</button>
                                    <button type="button" class="btn btn-info">2</button>
                                    <div class="btn-group" role="group">
                                        <button type="button" class="btn btn-info dropdown-toggle" id="exampleGroupDrop2"
                                                data-toggle="dropdown" aria-expanded="false">
                                            Dropdown
                                            <span class="caret"></span>
                                        </button>
                                        <ul class="dropdown-menu" aria-labelledby="exampleGroupDrop2" role="menu">
                                            <li role="presentation"><a href="javascript:void(0)" role="menuitem">Dropdown link</a></li>
                                            <li role="presentation"><a href="javascript:void(0)" role="menuitem">Dropdown link</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- End Example Nesting Button Group -->
                    </div>

                    <div class="col-lg-4 col-md-6">
                        <!-- Example Justified Button Group -->
                        <div class="example-wrap">
                            <h4 class="example-title">Justified Button Group</h4>
                            <p>To use justified button groups with <code>&lt;button&gt;</code>                  elements, you must wrap each button in a button group. Most browsers
                                don't properly apply our CSS for justification to <code>&lt;button&gt;</code>                  elements, but since we support button dropdowns, we can work
                                around that.</p>
                            <div class="example example-buttons">
                                <div class="btn-group btn-group-justified">
                                    <div class="btn-group" role="group">
                                        <button type="button" class="btn btn-primary">
                                            <i class="icon md-star" aria-hidden="true"></i>
                                            <br>
                                            <span class="text-uppercase hidden-xs">Favourites</span>
                                        </button>
                                    </div>

                                    <div class="btn-group" role="group">
                                        <button type="button" class="btn btn-info">
                                            <i class="icon md-time" aria-hidden="true"></i>
                                            <br>
                                            <span class="text-uppercase hidden-xs">Recent</span>
                                        </button>
                                    </div>

                                    <div class="btn-group" role="group">
                                        <button type="button" class="btn btn-success">
                                            <i class="icon md-account" aria-hidden="true"></i>
                                            <br>
                                            <span class="text-uppercase hidden-xs">Contacts</span>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- End Example Justified Button Group -->
                    </div>

                    <div class="clearfix visible-md-block visible-lg-block"></div>

                    <div class="col-lg-4 col-md-6">
                        <!-- Example Button.Js Componenents -->
                        <div class="example-wrap margin-md-0">
                            <h4 class="example-title">Button.Js Componenents</h4>
                            <p>
                                There are a few easy ways to quickly get started with Bootstrap, each one ...
                            </p>
                            <p class="hide" id="exampleMoreless">
                                Appealing to a different skill level and use case. Read through to see what suits
                                your particular needs.
                            </p>
                            <div class="example example-buttons">
                                <div>
                                    <button type="button" class="btn btn-sm btn-primary" data-toggle="button" data-more="#exampleMoreless">
                                        <i class="icon md-plus text" aria-hidden="true"></i>
                                        <span class="text">More</span>
                                        <i class="icon md-minus text-active" aria-hidden="true"></i>
                                        <span class="text-active">Less</span>
                                    </button>
                                </div>

                                <div>
                                    <button type="button" class="btn btn-success" data-toggle="button">
                                        <i class="icon md-upload text" aria-hidden="true"></i>
                                        <span class="text">Upload</span>
                                        <i class="icon md-check text-active" aria-hidden="true"></i>
                                        <span class="text-active">Success</span>
                                    </button>
                                    <button type="button" class="btn btn-icon btn-pure" data-toggle="button">
                                        <i class="icon md-favorite-outline text" aria-hidden="true"></i>
                                        <i class="icon md-favorite text-active text-danger" aria-hidden="true"></i>
                                    </button>
                                    <button type="button" class="btn btn-icon btn-pure active" data-toggle="button">
                      <span class="text">
                        <i class="icon md-thumb-up" aria-hidden="true"></i> 25
                      </span>
                      <span class="text-active">
                        <i class="icon md-thumb-up text-danger" aria-hidden="true"></i>                        26
                      </span>
                                    </button>
                                </div>

                                <div>
                                    <div class="btn-group" data-toggle="buttons" role="group">
                                        <label class="btn btn-primary active">
                                            <input type="radio" name="options" autocomplete="off" value="male" checked />
                                            <i class="icon md-check text-active" aria-hidden="true"></i>                        Male
                                        </label>
                                        <label class="btn btn-primary">
                                            <input type="radio" name="options" autocomplete="off" value="female" />
                                            <i class="icon md-check text-active" aria-hidden="true"></i>                        Female
                                        </label>
                                        <label class="btn btn-primary">
                                            <input type="radio" name="options" autocomplete="off" value="n/a" />
                                            <i class="icon md-check text-active" aria-hidden="true"></i>                        N/A
                                        </label>
                                    </div>
                                </div>

                                <div>
                                    <div class="btn-group" data-toggle="buttons" role="group">
                                        <label class="btn btn-primary active">
                                            <input type="checkbox" name="multiples" value="apple" checked /> Apple
                                        </label>
                                        <label class="btn btn-primary active">
                                            <input type="checkbox" name="multiples" value="banana" checked /> Banana
                                        </label>
                                        <label class="btn btn-primary">
                                            <input type="checkbox" name="multiples" value="orange" /> Orange
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- End Example Button.Js Componenents -->
                    </div>

                    <div class="col-lg-4 col-md-6">
                        <!-- Example Stateful -->
                        <div class="example-wrap">
                            <h4 class="example-title">Stateful</h4>
                            <p>Add <code>data-loading-text=&quot;Loading...&quot;</code> to use
                                a loading state on a button.</p>
                            <div class="example">
                                <button type="button" class="btn btn-primary" id="exampleStatefulButton" data-loading-text="Loading...">
                                    Loading state
                                </button>
                            </div>
                        </div>
                        <!-- End Example Stateful -->
                    </div>
                </div>
            </div>
        </div>
        <!-- End Panel Button Group -->

        <!-- Panel Ladda Buttons -->
        <div class="panel">
            <div class="panel-heading">
                <h3 class="panel-title">Ladda Buttons
                    <small><a class="example-plugin-link" href="http://msurguy.github.io/ladda-bootstrap/"
                              target="_blank">official website</a></small>
                </h3>
            </div>

            <div class="panel-body container-fluid">
                <div class="row row-lg">
                    <div class="col-lg-4 col-md-6">
                        <!-- Example Expand -->
                        <div class="example-wrap">
                            <h4 class="example-title">Expand</h4>
                            <div class="example example-buttons">
                                <div class="pull-left">
                                    <button type="button" class="btn btn-info ladda-button" data-style="expand-left"
                                            data-plugin="ladda">
                      <span class="ladda-label"><i class="icon md-arrows margin-right-10" aria-hidden="true"></i>Expand
                        left</span>
                                    </button>
                                </div>

                                <div class="pull-left">
                                    <button type="button" class="btn btn-success ladda-button" data-style="expand-right"
                                            data-plugin="ladda">
                      <span class="ladda-label"><i class="icon md-arrows margin-right-10" aria-hidden="true"></i>Expand
                        right</span>
                                    </button>
                                </div>

                                <div class="pull-left">
                                    <button type="button" class="btn btn-primary ladda-button" data-style="expand-up"
                                            data-plugin="ladda">
                      <span class="ladda-label"><i class="icon md-arrows margin-right-10" aria-hidden="true"></i>Expand
                        up</span>
                                    </button>
                                </div>

                                <div class="pull-left">
                                    <button type="button" class="btn btn-warning ladda-button" data-style="expand-down"
                                            data-plugin="ladda">
                      <span class="ladda-label"><i class="icon md-arrows margin-right-10" aria-hidden="true"></i>Expand
                        down</span>
                                    </button>
                                </div>
                            </div>
                        </div>
                        <!-- End Example Expand -->
                    </div>

                    <div class="col-lg-4 col-md-6">
                        <!-- Example Zoom -->
                        <div class="example-wrap">
                            <h4 class="example-title">Zoom</h4>
                            <div class="example example-buttons">
                                <div class="pull-left">
                                    <button type="button" class="btn btn-warning ladda-button" data-style="zoom-in"
                                            data-plugin="ladda">
                      <span class="ladda-label"><i class="icon md-zoom-in margin-right-10" aria-hidden="true"></i>Zoom
                        in</span>
                                    </button>
                                </div>

                                <div class="pull-left">
                                    <button type="button" class="btn btn-info ladda-button" data-style="zoom-out" data-plugin="ladda">
                      <span class="ladda-label"><i class="icon md-zoom-out margin-right-10" aria-hidden="true"></i>Zoom
                        out</span>
                                    </button>
                                </div>
                            </div>
                        </div>
                        <!-- End Example Zoom -->
                    </div>

                    <div class="clearfix visible-md-block"></div>

                    <div class="col-lg-4 col-md-6">
                        <!-- Example Progress -->
                        <div class="example-wrap">
                            <h4 class="example-title">Progress</h4>
                            <div class="example example-buttons">
                                <div class="pull-left">
                                    <button type="button" class="btn btn-success ladda-button" data-style="expand-left"
                                            data-plugin="laddaProgress">
                                        <span class="ladda-label"><i class="icon md-arrows margin-right-10" aria-hidden="true"></i>Expand</span>
                                    </button>
                                </div>

                                <div class="pull-left">
                                    <button type="button" class="btn btn-warning ladda-button" data-style="zoom-in"
                                            data-plugin="laddaProgress">
                                        <span class="ladda-label"><i class="icon md-zoom-in margin-right-10" aria-hidden="true"></i>Zoom</span>
                                    </button>
                                </div>

                                <div class="pull-left">
                                    <button type="button" class="btn btn-primary ladda-button" data-style="slide-left"
                                            data-plugin="laddaProgress">
                                        <span class="ladda-label"><i class="icon md-long-arrow-left margin-right-10" aria-hidden="true"></i>Slide</span>
                                    </button>
                                </div>
                            </div>
                        </div>
                        <!-- End Example Progress -->
                    </div>

                    <div class="clearfix visible-lg-block"></div>

                    <div class="col-md-6">
                        <!-- Example Slide -->
                        <div class="example-wrap margin-md-0">
                            <h4 class="example-title">Slide</h4>
                            <div class="example example-buttons">
                                <div class="pull-left">
                                    <button type="button" class="btn btn-primary ladda-button" data-style="slide-left"
                                            data-plugin="ladda">
                      <span class="ladda-label"><i class="icon md-long-arrow-left margin-right-10" aria-hidden="true"></i>Slide
                        left</span>
                                    </button>
                                </div>

                                <div class="pull-left">
                                    <button type="button" class="btn btn-primary ladda-button" data-style="slide-right"
                                            data-plugin="ladda">
                      <span class="ladda-label">Slide right<i class="icon md-long-arrow-right margin-left-10"
                                                              aria-hidden="true"></i></span>
                                    </button>
                                </div>

                                <div class="pull-left">
                                    <button type="button" class="btn btn-primary ladda-button" data-style="slide-up"
                                            data-plugin="ladda">
                      <span class="ladda-label"><i class="icon md-long-arrow-up margin-right-10" aria-hidden="true"></i>Slide
                        up</span>
                                    </button>
                                </div>

                                <div class="pull-left">
                                    <button type="button" class="btn btn-primary ladda-button" data-style="slide-down"
                                            data-plugin="ladda">
                      <span class="ladda-label"><i class="icon md-long-arrow-down margin-right-10" aria-hidden="true"></i>Slide
                        down</span>
                                    </button>
                                </div>
                            </div>
                        </div>
                        <!-- End Example Slide -->
                    </div>

                    <div class="clearfix visible-md-block"></div>

                    <div class="col-md-6">
                        <!-- Example Sizing -->
                        <div class="example-wrap">
                            <h4 class="example-title">Sizing</h4>
                            <div class="example example-buttons">
                                <button type="button" class="btn btn-primary btn-lg ladda-button" data-style="expand-left"
                                        data-plugin="ladda">
                                    <span class="ladda-label">Large</span>
                                </button>
                                <button type="button" class="btn btn-primary ladda-button" data-style="expand-left"
                                        data-plugin="ladda">
                                    <span class="ladda-label">Default</span>
                                </button>
                                <button type="button" class="btn btn-primary btn-sm ladda-button" data-style="expand-left"
                                        data-plugin="ladda">
                                    <span class="ladda-label">Small</span>
                                </button>
                                <button type="button" class="btn btn-primary btn-xs ladda-button" data-style="expand-left"
                                        data-plugin="ladda">
                                    <span class="ladda-label">Tiny</span>
                                </button>
                            </div>
                        </div>
                        <!-- End Example Sizing -->
                    </div>
                </div>
            </div>
        </div>
        <!-- End Panel Ladda Buttons -->
    </div>
</div>
<!-- End Page -->


<!-- Footer -->
<footer class="site-footer">
    <div class="site-footer-legal">© 2016 <a href="http://themeforest.net/item/remark-responsive-bootstrap-admin-template/11989202">Remark</a></div>
    <div class="site-footer-right">
        Crafted with <i class="red-600 icon md-favorite"></i> by <a href="http://themeforest.net/user/amazingSurge">amazingSurge</a>
    </div>
</footer>
<!-- Core  -->
<script src="../../global/vendor/jquery/jquery.min.js"></script>
<script src="../../global/vendor/bootstrap/bootstrap.min.js"></script>
<script src="../../global/vendor/animsition/animsition.min.js"></script>
<script src="../../global/vendor/asscroll/jquery-asScroll.min.js"></script>
<script src="../../global/vendor/mousewheel/jquery.mousewheel.min.js"></script>
<script src="../../global/vendor/asscrollable/jquery.asScrollable.all.min.js"></script>
<script src="../../global/vendor/ashoverscroll/jquery-asHoverScroll.min.js"></script>
<script src="../../global/vendor/waves/waves.min.js"></script>

<!-- Plugins -->
<script src="../../global/vendor/switchery/switchery.min.js"></script>
<script src="../../global/vendor/intro-js/intro.min.js"></script>
<script src="../../global/vendor/screenfull/screenfull.min.js"></script>
<script src="../../global/vendor/slidepanel/jquery-slidePanel.min.js"></script>

<!-- Plugins For This Page -->
<script src="../../global/vendor/ladda-bootstrap/spin.min.js"></script>
<script src="../../global/vendor/ladda-bootstrap/ladda.min.js"></script>

<!-- Scripts -->
<script src="../../global/js/core.min.js"></script>
<script src="../assets/js/site.min.js"></script>

<script src="../assets/js/sections/menu.min.js"></script>
<script src="../assets/js/sections/menubar.min.js"></script>
<script src="../assets/js/sections/gridmenu.min.js"></script>
<script src="../assets/js/sections/sidebar.min.js"></script>

<script src="../../global/js/configs/config-colors.min.js"></script>
<script src="../assets/js/configs/config-tour.min.js"></script>

<script src="../../global/js/components/asscrollable.min.js"></script>
<script src="../../global/js/components/animsition.min.js"></script>
<script src="../../global/js/components/slidepanel.min.js"></script>
<script src="../../global/js/components/switchery.min.js"></script>
<script src="../../global/js/components/tabs.min.js"></script>

<script src="../../global/js/components/buttons.min.js"></script>
<script src="../../global/js/components/ladda-bootstrap.min.js"></script>


<script src="../assets/examples/js/uikit/button.min.js"></script>



</body>

</html>